<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            计算属性：
                1.定义：要用的属性不存在，要通过已有属性计算得来
                2.原理：底层借助了Object.defineproperty方法提供getter和setter
                3.get函数什么时候执行？
                    （1）初次读取时会执行一次
                    （2）当依赖的数据发生改变时会被再次调用
                4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调式方便
                5.备注：
                    （1）计算属性最终会出现在vm上，直接读取使用即可
                    （2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
         -->
        <div id="root">
            姓：<input type="text" v-model="firstName"><br>
            名：<input type="text" v-model="lastName"><br>
            <!-- 计算属性只调用一次    与methods实现相比，内部有缓存机制（复用），效率更高，调式方便-->
            全名：<span>{{fullName}}</span><br>
            全名：<span>{{fullName}}</span><br>
            全名：<span>{{fullName}}</span><br>
            全名：<span>{{fullName}}</span><br>
            全名：<span>{{fullName}}</span>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示
            const vm = new Vue({
                el:'#root',
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                computed: {
                    fullName:{
                        get(){
                            // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                            // get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化时
                            console.log('get被调用了');
                            console.log(this);//这里的this是vm
                            return this.firstName + '--' + this.lastName
                        },
                        // set有什么调用？当fullName修改时候
                        set(value){// 默认接受修改的值   value
                            console.log(value);
                            const arr = value.split('-');
                            console.log(arr);
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                        }
                    }
                }
            })
        </script>
    </body>
</html>